<template>
  <div id="order">  

     <div  style="display:flex;align-items: center;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold:">产出订单</div>
    </div> 

   <el-form ref="form" :model="form" label-width="70px"> 

      <div style="display:flex;">
          <div style="flex:1;display:flex;align-items: center;">

            <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">查询项</div>
             <el-form-item label="订单编号" >
              <el-input v-model="form.orderno" placeholder="订单编号"  style="width:140px;"></el-input>
            </el-form-item>
            <el-form-item label="账户查询" style="margin-left:5px;">
              <el-input v-model="form.input1" placeholder="姓名/手机号"  style="width:140px;"></el-input>
            </el-form-item>

            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:5px;background:#FFC600;color:white;" @click="search_but1()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:5px;border:1px solid #D9D9D9;" @click="sx_but()">清 空</div>    
            </div>

         </div>
         <!-- <div>
            <el-button class="custom_color_button" type="primary"  @click="bh_all">统一驳回</el-button>         
            <el-button class="custom_color_button" type="primary"  @click="go_order_xq">驳回详情</el-button>
            <el-button  class="custom_color_button" type="primary" @click="output">导出表格</el-button>  
         </div> -->

     </div>
     <div style="display:flex;align-items: center;">
            <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">筛选项</div> 

             <el-form-item label="时间类型" >
                <el-select  v-model="form.select5_num" placeholder="时间类型" style="width:140px;" @change="select_change_time()">
                    <el-option  v-for="(item,index) in select5_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
             </el-form-item>

             <el-form-item v-if="form.select5_num == 2" label-width="0"  style="margin-left:5px;">
                    <el-date-picker  type="date"   placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.onedate" style="width:140px;"> 
                    </el-date-picker>
              </el-form-item>

              <el-form-item v-if="form.select5_num == 1"  label-width="0px" style="margin-left:5px;">
                      <div style="display: flex;">
                            <el-date-picker  type="date"   placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.start" style="width:140px;"></el-date-picker>
                            <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                            <el-date-picker  type="date"   placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.end" style="width: 140px;"></el-date-picker>
                      </div>
               </el-form-item> 

             <el-form-item label="订单类别" style="margin-left:5px;" >
                <el-select  v-model="form.select1_num" placeholder="订单类别" style="width:140px;">
                    <el-option  v-for="(item,index) in select1_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item  label="产出操作" style="margin-left:5px;" >
                <el-select  v-model="form.select4_num" placeholder="产出操作" style="width:140px;">
                    <el-option  v-for="(item,index) in select4_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item  label="订单状态" style="margin-left:5px;" >
                <el-select  v-model="form.select3_num" placeholder="订单状态" style="width:140px;">
                    <el-option  v-for="(item,index) in select3_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:5px;background:#FFC600;color:white;" @click="search_but2()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:5px;border:1px solid #D9D9D9;" @click="sx_but()">清 空</div>    
            </div>
     </div>
     
      <el-row>   
         <el-col :span="24" style="text-align: right;margin-bottom:10px;">
            <el-button class="custom_color_button1" type="primary"  @click="bh_all">
             <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png" />统一驳回
            </el-button>         
            <el-button class="custom_color_button1" type="primary"  @click="go_order_xq">
              <img class="custom_color_button1_img" src="@/assets/images/but_bg9.png" />驳回详情
            </el-button>
            <el-button  class="custom_color_button1" type="primary" @click="output">
              <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png" />导出表格
            </el-button>   
        </el-col>  
    </el-row>

  
   </el-form>

   <!-- 渲染数据list -->
   <receiving-order-list :orderdata="orderdata" :orderdata1="orderdata1" @up_list_fun="list_fun"> </receiving-order-list>


       <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="orderdata1" id="mytable1" style="width: 100%;height:10px;">
            <el-table-column label="订单时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单类别"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.level }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单价值"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.price }}</span>
                    </template>
                </el-table-column> 
                 <el-table-column label="产出账号"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="产出操作"  align='center'   >                   
                    <template slot-scope="scope">                   
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_MANUAL'">手动收获</span>
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_AUTO'">自动收获</span>
                        <span v-if=" scope.row.status == 'APPEALING'">自动收获</span>
                        <span v-if=" scope.row.status == 'GAMEOVER'">已置换</span>
                    </template>
                </el-table-column>
                 <el-table-column label="订单状态"  align='center'  >                   
                    <template slot-scope="scope">      
                        <span v-if="scope.row.displace == 0">             
                            <span v-if="scope.row.delivered == 1">已发货</span>
                            <span v-else>待发货</span>  
                        </span> 
                        <span v-if="scope.row.displace == 1">             
                            <span>已置换</span>  
                        </span> 
                    </template>
                </el-table-column>
        </el-table> 

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


       <!-- 统一驳回 -->
    <el-dialog title="统一驳回" :visible.sync="bhall_mtk"  width="300px">
        <div style="width:100%;"> 

           <el-form ref="form"   label-width="0px" style="width:100%;">
              <el-form-item label="">
                 <el-date-picker  type="date" 
                  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                   v-model="bhall_form.onetime" style="width:100%;"></el-date-picker>
              </el-form-item>                                                                        
        </el-form>

          <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="bhall_qr()"  v-loading.fullscreen.lock="fullscreenLoading">确认</el-button>
            </div>
                  
        </div> 
    </el-dialog>

    

      
  </div>
</template>

<script>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

import ReceivingOrderList from '@/view/Order/ReceivingOrderList'
export default {
  name: 'order',
  data () {
    return {
        orderdata:[],
        orderdata1:[],
        page:1,
        count:0,
        form:{
          input1:'',
          orderno:'',
          select1_num:'',
          select3_num:'',
          select4_num:0,
          select5_num:0,
          start:'',
          end:'',
          onedate:''
        },
        select1_data:[],
        select3_data:[{"id":2,"name":"待发货"},{"id":3,"name":"已发货"},{"id":4,"name":"已置换"}],
        select4_data:[{"id":0,"name":"全部"},{"id":1,"name":"手动收获"},{"id":2,"name":"自动收获"},{"id":3,"name":"已完成"}],
        select5_data:[{"id":0,"name":"全部时间"},{"id":1,"name":"按区间"},{"id":2,"name":"按日期"}],
        bhall_mtk:false,
        bhall_form:{
          onetime:'',
        },
        fullscreenLoading: false
    }
  },
 components:{
    ReceivingOrderList
  },
  created(){
     this.list_fun()
     this.list_zy()
     this.list_fun1()
  },
  mounted (){
    
  },
  methods: {
    list_zy(){
      this.post("/manor/manorOption", {
       }).then(res => { 
           this.select1_data = res.result                          
       })
    },
    list_fun(){
        this.post("/order/listOfData", {
              page:this.page,
              is_all:0, //0查看带分页
              //orderno:this.form.orderno,
              pid:this.form.orderno,
              date_type:this.form.select5_num,
              onedate:this.form.onedate,
              start:this.form.start,
              end:this.form.end,
              manualOrAuto:this.form.select4_num,
              maid:this.form.select1_num,
              account:this.form.input1,
              type:this.form.select3_num,
	        }).then(res => {
            this.count = res.result.count
            this.orderdata = res.result.list

            for(let a of this.orderdata){
              if( a.status == 'TAKE_DELIVERY_MANUAL'){
                  a.sh_status = '手动收获'  //收获状态
                  a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'TAKE_DELIVERY_AUTO'){
                   a.sh_status = '自动收获'
                   a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'APPEALING'){  //待赎回的
                   a.sh_status = '自动收获'
                   a.dd_status = '赎回'  //订单状态
              }
            }


            console.log( this.orderdata,"asda")
         })
    },
    list_fun1(){
        this.post("/order/listOfData", {
              page:this.page,
              is_all:1, //1查看带不分页
              orderno:this.form.orderno,
              date_type:this.form.select5_num,
              onedate:this.form.onedate,
              start:this.form.start,
              end:this.form.end,
              manualOrAuto:this.form.select4_num,
              maid:this.form.select1_num,
              account:this.form.input1,
              type:this.form.select3_num,
	        }).then(res => {
            this.orderdata1 = res.result.list

            for(let a of this.orderdata1){
              if( a.status == 'TAKE_DELIVERY_MANUAL'){
                  a.sh_status = '手动收获'  //收获状态
                  a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'TAKE_DELIVERY_AUTO'){
                   a.sh_status = '自动收获'
                   a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'APPEALING'){  //待赎回的
                   a.sh_status = '自动收获'
                   a.dd_status = '赎回'  //订单状态
              }
            }


            //console.log( this.orderdata1,"asda")
         })
    },
    search_but1(){
        this.page = 1
        this.list_fun()
        this.list_fun1()
    },
    search_but2(){
        this.page = 1
        this.list_fun()
        this.list_fun1()
    },
    sx_but(){
        this.form={
          input1:'',
          orderno:'',
          select1_num:'',
          select3_num:'',
          select4_num:0,
          select5_num:0,
          start:'',
          end:'',
          onedate:''
        },
        this.page = 1
        this.list_fun()
        this.list_fun1()
    },
     select_change_time(){
          if(this.form.select5_num == 0){
               this.form.start = ''
               this.form.end = ''
               this.form.onedate = ''
          }else if(this.form.select5_num == 1){
             this.form.onedate = ''
          }else if(this.form.select5_num == 2){
              this.form.start = ''
               this.form.end = ''
          }
     },
     bh_all(){
           this.bhall_mtk = true
           this.bhall_form.onetime = ''
     },  
     bhall_qr(){
           this.fullscreenLoading = true;
           this.post("/order/delAutoHarvest", {
                    onetime:this.bhall_form.onetime,
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.bhall_mtk = false
                      this.list_fun()
                       this.fullscreenLoading = false;
                    }else {
                      this.open1(res.message,'warning')
                      this.bhall_mtk = false
                       this.fullscreenLoading = false;
                }

             })
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      },
      go_order_xq(){
       this.$router.push({
          path: '/index/orderdetails',
          query: {
            name:"详情",
          }
        })
      },
      output() {
        var wb = XLSX.utils.table_to_book(document.querySelector("#mytable1"));//mytable为表格的id名
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "sheet.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    },
  }
}
</script>


<style scoped>
.buttoon_box{
  display:flex;margin-bottom:10px;
}
.buttoon_box_item{
  height:40px;line-height:40px;width:60px;font-size:14px;text-align:center;border-radius:5px;
}
.el-input-box>>>input{
  padding: 0px 3px !important;
}
</style>
